<template>
    <div>
        <div class="item" v-for="(item, index) of list" :key="index">
            <div class="item-title">
                <span class="item-title-icon"></span>
                {{item.title}}
            </div>
            <!-- 存在多级数组是执行以下方法 -->
              <div v-if="item.children" class="item_children">
                <detail-list :list="item.children"></detail-list>
            </div>
        </div>
    </div>
</template>

<script>
export default {
  name: 'detailList',
  props: {
    list: Array
  }
}
</script>

<style scoped>
    .item-title{
        height: 2.4rem;
        line-height: 2.4rem;
        text-align: left;
        padding: 0 .4rem;
        font-size: 1.1rem;
        border-bottom: 1px solid #ccc;
    }
    .item-title-icon{
        position: relative;
        top: .2rem;
        left: .2rem;
        display: inline-block;
        width: 1rem;
        height: 1rem;
        background: url('../../../static/images/icon2.png');
        background-size: 100% 100%;
        margin-right: 6px;
    }
    .item_children{
        padding: 0 1rem;
    }
</style>
